<template>
  <PageContainer>
    <view class="container">
      <Tabs
        v-model="params.approvalStatus"
        background-color="#FFF"
        :isScrollTop="false"
        @change="refresh"
      >
        <Header title="合作撮合">
          <template>
            <CustomTopTips
              text="本页面可查看您分享推广带来的撮合申请、作为供需服务专员查看所有其他供需合作撮合申请;"
            />
            <view class="py-6 px-16" style="height: 72rpx">
              <TSearch
                v-model="params.keyWord"
                placeholder="搜索姓名/单位/供需标题"
                @confirm="refresh"
              ></TSearch>
            </view>
            <TabNav tabBarColor="#2878FF" />
          </template>
        </Header>
        <TabsItem name="全部" :value="void 0"></TabsItem>
        <TabsItem
          name="待审核"
          :unread="auditNum"
          :value="MatchApprovalStatusEnum.pending"
        ></TabsItem>
        <TabsItem name="已同意" :value="MatchApprovalStatusEnum.agree"></TabsItem>
        <TabsItem name="已拒绝" :value="MatchApprovalStatusEnum.refuse"></TabsItem>
      </Tabs>
      <Paglist
        v-model="dataList"
        :is-init-api="true"
        :parame="params"
        @register="register"
        :is-show-loadmore="dataList.length > 1"
        :scroll-top-bottom="200"
      >
        <view class="pa-16">
          <template v-for="(v, i) in dataList" :key="v.id">
            <DataItem :data="v" />
          </template>
        </view>
      </Paglist>
    </view>
  </PageContainer>
</template>

<script lang="ts" setup>
  /* cooperativeAudit 合作撮合 */
  import Header from '@/components/Header/index.vue';
  import PageContainer from '@/components/PageContainer/index.vue';
  import CustomTopTips from '@/components/CustomTopTips/index.vue';
  import Tabs from '@/components/tabs/index.vue';
  import TabsItem from '@/components/tabs/item.vue';
  import TabNav from '@/components/tabs/nav.vue';
  import TSearch from '@/components/TSearch/index.vue';
  import { MatchApprovalStatusEnum } from '@/enums/businessOpportunitiesEnum';
  import { provide, reactive, ref } from 'vue';
  import Paglist from '@/components/Paglist/index.vue';
  import { useConList } from '@/components/Paglist/useConList';
  import {
    applyTypeAuditRecord,
    getBringTogetherAuditStatistics,
  } from '@/api/businessOpportunities';
  import DataItem from './components/DataItem.vue';
  import { onShow } from '@dcloudio/uni-app';

  const dataList = ref([]);
  const params = reactive<{ approvalStatus?: MatchApprovalStatusEnum; keyWord: string }>({
    approvalStatus: void 0,
    keyWord: '',
  });
  const [register, { refresh }] = useConList();
  provide('api', applyTypeAuditRecord);
  onShow(() => {
    dataList.value.length && refresh();
    queryBringTogetherAuditStatistics();
  });
  const auditNum = ref(0);
  const queryBringTogetherAuditStatistics = async () => {
    auditNum.value = await getBringTogetherAuditStatistics();
  };
</script>

<style lang="scss" scoped></style>
